<template>
	<!-- <van-nav-bar :fixed="true" :placeholder="true" custom-style="background-color:#3087e8;border:none" /> -->

	<view class=" wrapper" style=" ">
		<view class="driver-mine" v-if="currentRole == 'driver'">
			<driverMine></driverMine>
		</view>
		<view class="passenger-mine" v-else>
			<passengerMine></passengerMine>
		</view>
	</view>
	<!-- <use-tabber :list="list" :active="active"></use-tabber> -->
	<use-tabber :list="list" :active="active"></use-tabber>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store/counter.js';
	import {
		storeToRefs,
	} from 'pinia'
	const {
		role,
		getRole
	} = storeToRefs(useStore());
	const store = useStore();
	const currentRole = ref('')
	const list = ref([]);
	const active = ref(3)
	onShow(() => {

		list.value = store.getRole()
		currentRole.value = store.role
	})
</script>

<style scoped lang="less">
	.wrapper {
		// height: 100vh;
		background: linear-gradient(0deg, #F5F5F5 66%, #1c6ddc 80%);
	}

	::v-deep .van-grid-item {
		border-radius: 10px;
	}

	::v-deep .van-cell-group--inset {
		margin: 0;
	}

	.driver-mine {
		::v-deep .van-cell {
			padding: 0;
		}

	}

	.passenger-mine {
		::v-deep .van-cell {
			line-height: 80rpx !important;
			align-items: center;
		}

		::v-deep .van-cell::after {
			border-bottom: 1rpx solid #dddddd;
		}

		::v-deep .van-icon {
			width: 47rpx !important;
			height: 76rpx !important;
			margin-left: 20rpx !important;
			padding-top: 3px;
		}

		::v-deep .van-cell__title {
			font-size: 30rpx !important;
			font-weight: bold !important;
		}
	}
</style>